<template>
	<el-dialog
		:visible.sync="showPicker"
    :close-on-click-modal="false"
		:append-to-body="true"
		width="1400px"
		@close="widgetPickerClose">
		<div slot="title" class="flex-justify-start">
			<div class="font-size-18 font-weight-bold">选择组件</div>
			<div class="font-size-12 font-color-danger font-weight-bold mar-lft-10">( *双击组件树或组件本身进行选择 )</div>
		</div>
		<div class="widget-picker-dialog">
			<div class="widget-picker-dialog-tree">
				<div v-if="editorType === 'room'">
					<AsideCollapse :hide-operation="true" :hide-sort="true" title="页面">
						<WidgetPickerTree
							:editor-type="editorType"
							:page-hdl="curPageHandler"
							@selectPage="updateCurPageTypeForPicker('page')"
							@selectWidget="selectWidget"></WidgetPickerTree>
					</AsideCollapse>
					<AsideCollapse :hide-operation="true" :hide-sort="true" title="子页面">
						<WidgetPickerTree
							:editor-type="editorType"
							:page-hdl="curSubPageHandler"
							@selectPage="updateCurPageTypeForPicker('subPage')"
							@selectWidget="selectWidget"></WidgetPickerTree>
					</AsideCollapse>
				</div>
				<div v-else>
					<WidgetPickerTree
						:editor-type="editorType"
						:page-hdl="curPageHandler"
						@selectWidget="selectWidget"></WidgetPickerTree>
				</div>
			</div>
			<div class="widget-picker-dialog-content">
				<div class="editor-workspace">
					<div
						v-for="page in pages"
						v-if="judgePageActive(page)" :key="page.id"
						:style="{width: `${page.rect.width}px`, height: `${page.rect.height}px`}"
						class="pad-window">
						<Widget :id="page.id" :widget="page" :is-select-mode="true"></Widget>
					</div>
				</div>
			</div>
		</div>
	</el-dialog>
</template>

<script>
	import EmptyContent from "@/components/IDE/EmptyContent.vue";
	import WidgetPickerTree from "@/components/IDE/widgetPicker/WidgetPickerTree.vue";
	import Widget from "@/components/IDE/widget/atom/Widget.vue";
	import {WidgetFactory} from "@/modules/IDE/widgetFactory";
	import AsideCollapse from "@/page/IDE/editor/aside/AsideCollapse.vue";
	import {mapActions, mapState} from "vuex";

	export default {
		name: "WidgetPicker",
		components: {
			AsideCollapse,
			EmptyContent,
			WidgetPickerTree,
			Widget
		},
		props: {
			editorType: {
				type: String,
				default: 'room', // room/component
			},
		},
		data() {
			return {
				showPicker: false,
				curPickerId: '',
				curPageType: 'page', // page/subPage
				widgetDisplayData: [], // 用于暂存需要更改 displayForPicker，在弹框隐藏后进行恢复
			};
		},
		computed: {
			...mapState({
				curPageTypeForPicker: state => state.ide.curPageTypeForPicker,
				widgetPickerInfo: state => state.ide.widgetPickerInfo,
				curPageHandler: state => state.ide.curPageHandler,
				curSubPageHandler: state => state.ide.curSubPageHandler,
			}),
		  pages() {
				const pages = [];
				this.curPageHandler.pages.forEach(page => pages.push(page));
				if (this.editorType === 'room') {
					this.curSubPageHandler.pages.forEach(page => pages.push(page));
				}
				return pages;
		  },
			judgePageActive() {
				return (page) => {
					switch (this.curPageTypeForPicker) {
					  case 'page':
					    return page.id === this.curPageHandler.activePageForPicker.id;
					  case 'subPage':
						  return page.id === this.curSubPageHandler.activePageForPicker.id;
					  default:
					    return false;
					}
				}
			}
		},
		watch: {
		  'widgetPickerInfo.show': {
				handler(show) {
					if (show) {
						const {pickerId = '', selectWidgetId = ''} = this.widgetPickerInfo;
						this.curPickerId = pickerId;
						this.showPicker = true;
						if (selectWidgetId) {
							const widget = WidgetFactory.getWidgetById(selectWidgetId);
							if (!widget) return;
							this.widgetActiveHandler(widget);
						} else {
							this.widgetActiveHandler(this.curPageHandler.activePageForPicker);
						}
					} else {
						this.showPicker = false;
					}
				},
			  immediate: true
		  }
		},
		mounted() {
			this.$EventBus.$on('selectWidgetForPicker', this.widgetActiveHandler);
			this.$EventBus.$on('dbClickWidgetForPicker', this.selectWidget);
		},
		beforeDestroy() {
			this.$EventBus.$off('selectWidgetForPicker');
			this.$EventBus.$off('dbClickWidgetForPicker');
		},
		methods: {
			...mapActions(['updateWidgetPickerInfo', 'updateCurPageTypeForPicker']),
			widgetActiveHandler(widget) {
				WidgetFactory.production.forEach(p => {
					p.activeForPicker = p.id === widget.id;
				});
				if (!widget.subPageId) {
					this.updateCurPageTypeForPicker('page');
					this.curPageHandler.updateActivePage(widget, true);
				} else {
					this.updateCurPageTypeForPicker('subPage');
					this.curSubPageHandler.updateActivePage(widget, true);
				}
				// 先显示当前组件本身和所有父组件，当前选中的组件如果存在遮挡，这递归向上隐藏兄弟组件
				const fullPath = WidgetFactory.getWidgetFullPath(widget.id);
				fullPath.forEach(widgetId => {
					const widget = WidgetFactory.getWidgetById(widgetId);
					widget.displayForPicker = true;
					const brothers = WidgetFactory.getWidgetBrothers(widget);
					brothers.forEach(brother => {
						if (WidgetFactory.judgeWidgetRectCovered(widget, brother)) {
							brother.displayForPicker = false;
						}
					});
				});
			},
			selectWidget(widget) {
				const {relateSubPage, relateSubPageId, isDeleted} = widget;
				if (isDeleted) return;
				if (relateSubPage) {
					const subPage = WidgetFactory.getWidgetById(relateSubPageId);
					if (!subPage) return;
					this.widgetActiveHandler(subPage);
				} else {
					this.updateWidgetPickerInfo({
						show: false,
						pickerId: this.curPickerId,
						selectWidgetId: widget.id
					});
				}
			},
			widgetPickerClose() {
				// 组件选择器隐藏后，恢复被更改过的 widget displayForPicker 状态
				this.widgetDisplayData.forEach(widget => widget.displayForPicker = false);
				this.widgetDisplayData = [];
				const {pickerId, selectWidgetId} = this.widgetPickerInfo;
				this.updateWidgetPickerInfo({
					show: false,
					pickerId: pickerId,
					selectWidgetId: selectWidgetId
				});
			}
		},
	}
</script>

<style scoped lang="less">

	.widget-picker-dialog {
		display: flex;

		.widget-picker-dialog-tree {
			min-width: 280px;
			max-height: 700px;
			overflow: auto;
			border: 1px solid #DADCE5;
		}

		.widget-picker-dialog-content {
			flex-grow: 1;
			min-height: 650px;
			height: 100%;
			position: relative;
			overflow: auto;
			background: url("../../../assets/img/canvas_bg.jpeg") repeat;

			.pad-window {
				position: absolute;
				top: 20px;
				left: 20px;
			}

			.editor-slider {
				position: fixed;
				top: 250px;
				right: 5px;
				width: 60px;
				z-index: 999;
			}

			.widget-picker-dialog-window {
				position: absolute;
				top: 20px;
				left: 20px;
			}
		}
	}

</style>
